<script setup lang="ts">
import type {SlideButton} from "@/typex/modules/ui/tab-buttonx.ts";
import TabBar from "@/components/TabBar.vue";
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {LogApi} from "@/api/cloud/traffic_log.ts";
import   {cloud} from "@/api/dto";
import Login from "@/page/cloud/Login.vue";

const router = useRouter();

const icon = "bi bi-tag"

const btns: Array<SlideButton> = [
    {name: "menu.profile", path: "profile", icon: icon},
    {name: "menu.flow", path: "flow", icon: icon},
]
const handleMenuClick = async (path: string) => {
    await router.push({path: path});
};
const logResult = ref<cloud.Traffic[]>([])
onMounted(() => {
    LogApi.TrafficSearch({pageInfo: {page: 1, pageSize: 20}}).then(resp => {
        logResult.value = resp.data.items
    })
})
</script>

<template lang="pug">
.dashboard
    tab-bar(:handel="handleMenuClick" :buttons="btns" )
    span {{logResult}}
    n-card( title="小卡片" size="small" hoverable) asd
</template>

<style scoped lang="scss">
.dashboard {
    max-width: 80%;
}
</style>